import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
// ===================================================================== global declare
const { $fn, $http, $Lazy } = window
// ===================================================================== $Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const Title 	= $Lazy.load(()=>import('#tp/title/title-small'))
const $time 	= $Lazy.file(()=>import('@com/utils/time'))
// ===================================================================== component
const iconBox = {
	width: '30px',
	height: '30px',
	fontSize: '14px',
	color: '#fff',
	textAlign: 'center',
	lineHeight: '30px',
	borderRadius: '50%',
	minWidth:'30px',
	backgroundColor:'#dfedf4',
}
class Index extends React.Component{
	state = {
		data:[],	// 常规
		pathologyData:{	// 病理
			current: [],
			before: [],
			last: [],
		},
		// 搜索表单列表
		forms: [
			{ label: '接收时间',		names: ['start_at','end_at'],	name:'jz-time',	type:'date-range', 	loading:true },
		],
		colors: ['#fef6e1', '#e5ecff', '#d9f3f2', '#fae9e2', '#e9ebf5', '#dfedf4', '#fcedf2', '#e9e6f9', '#e8f0f6', '#e0f2e1', '#f8f5e6', '#f0f5ff', '#e8f8f9', '#ddeef8' ],
		circleColor: ['#37a6da', '#b5bbbe', '#37c1da', '#da3b37', '#f49b0f', ],
		formula:''	// 常规相关公式
	}
	query = {}
	
	componentDidMount(){
		const user = $fn.getUser()
		this.query = {comp_id: user.comp_id }
		$time.then(f=>{
			const arr = f.duration['1-today-time']()
			this.resetModel = { start_at: arr[0], end_at: arr[1], 'jz-time':arr }
			this.model = $fn.copy(this.resetModel)
			this.fetch()
		})
		this.getPathologyData(user.comp_id)
	}

	// 常规
	fetch = () => $fn.fetch.call(this,'bill-st/specimenkind', {paging:'get'}).then((data)=>{
		const formula = data.pop()['title'].replace(/\s+/g,'&emsp;&emsp;')
		this.setState({data, formula})
	})
	
	// 病理
	getPathologyData = (comp_id) => $http.pull(this,'bill-st/pathologyst',{param: {comp_id},  dataName:'pathologyData'})

	
	render(){
		const { data, colors, pathologyData, circleColor, formula} = this.state
		return (
			<Page title='账单数量统计' header={SearchForm.call(this, {timeStr:'1-today-time'})}>
				<div className='h w plr15'>
					<div>
						<Title title='常规' />
						<div className='pl20 pb5 p8 f12' dangerouslySetInnerHTML={{__html:formula}}></div>
						<div className='fxt plr15 fxw '>
							{
								data.map((v,i)=> (
									<div key={i} className='p5 mr5 mb5 fv fxmc r3px' style={{width:'calc(16.6% - 5px)',height:'85px', background:colors[Math.floor(Math.random() * colors.length)]}}>
										<div className='g6 ex fxmc tc p8 f12'>{v.title}</div>
										<div className='f24 tc ex fxmc'>{v.num}</div>
									</div>
								))
							}
						</div>
					</div>
					<div>
						<Title title='病理' />
						<div className='plr15'>
							<div className='fxj mb10'>
								<div style={{width:'33%'}}><span className='r3px mr5' style={{width:6,height:6,backgroundColor:'#a7cece',display:'inline-block'}}></span><span>当月</span></div>
								<div style={{width:'33%'}}><span className='r3px mr5' style={{width:6,height:6,backgroundColor:'#a7cece',display:'inline-block'}}></span><span>上月</span></div>
								<div style={{width:'33%'}}><span className='r3px mr5' style={{width:6,height:6,backgroundColor:'#a7cece',display:'inline-block'}}></span><span>上上月</span></div>
							</div>
							<div className='fxj'>
								<div className='pr30' style={{width:'33%'}}>
									{
										pathologyData.current.map((v,i)=> (
											<div key={i} className='h60 fxt xm'>
												<div className='' style={{...iconBox, backgroundColor:circleColor[i]}}>{v.title.substr(0,1)}</div>
												<div className='w fxj plr20  bbor1'>
													<span>{v.title}</span>
													<span>{v.num}</span>
												</div>
											</div>
										))
									}
								</div>
								<div className='pr30' style={{width:'33%'}}>
									{
										pathologyData.last.map((v,i)=> (
											<div key={i} className='h60 fxt xm'>
												<div style={{...iconBox, backgroundColor:circleColor[i]}}>{v.title.substr(0,1)}</div>
												<div className='w fxj plr20  bbor1'>
													<span>{v.title}</span>
													<span>{v.num}</span>
												</div>
											</div>
										))
									}
								</div>
								<div className='pr30' style={{width:'33%'}}>
									{
										pathologyData.before.map((v,i)=> (
											<div key={i} className='h60 fxt xm'>
												<div style={{...iconBox, backgroundColor:circleColor[i]}}>{v.title.substr(0,1)}</div>
												<div className='w fxj plr20  bbor1'>
													<span>{v.title}</span>
													<span>{v.num}</span>
												</div>
											</div>
										))
									}
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</Page>
		)
	}
}

export default Index